<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>华猫商城</title>
		<style></style>
		<link href="../css/common.css" rel="stylesheet">
		<link href="../plugin/layer/layer.css" rel="stylesheet">
		<link href="../plugin/layer/skin/laypage.css" rel="stylesheet">
		<link href="../css/carousel.css" rel="stylesheet">
		<link href="../css/base.css" rel="stylesheet">
		<link href="../css/shop.css" rel="stylesheet">
		<style>
			.top_bg {
				padding-left: 0;
				width: 1190px;
			}
			/*.shop_bottom:hover{
				padding-top:150px;
			}*/
			.shop_bottom{
				height:352px;
				padding-top:200px;
				position:absolute;
				z-index: 12;
				width:100%;
				transition: padding-top 0.25s ease-in-out 0s;
				top:0;left:0;
			}
			.shop_list li{
				
				position:relative;
				overflow: hidden;
			}
			.shop_list li>img{
				position:absolute;top:0;left:0;
				z-index: 11;
			}
			.logo_img{
				text-align: center;
			}
			.logo_img img{
				/*height:77px;*/
				opacity: 0;
				height:35px;
			}
			.fr{
				margin-right: 20px;
			}
		</style>
	</head>

	<body>
		<div id="header"></div>
		<div id="headerBox"></div>
		<div id="nav_menu"></div>
		<div class="ZZHT-container">
			<!--<div class="shop_bg">
				<img src="../images/shop/shop_03.png" alt=""/>
			</div>-->
			<div class="top_bg">
				<div class="carousel-content">
					<ul class="carousel">
						<li v-for="(v,i) in adimg"><a><img :src="imgUrlS+v.adFile"></a></li>
					</ul>
				</div>
			</div>
			<div class="shop_class">
				<ul>
					<li>
						<img src="../images/shop/shop_07.png" alt="" />
						服装配饰
					</li>
					<li>
						<img src="../images/shop/shop_09.png" alt="" />
						餐饮服务
					</li>
					<li>
						<img src="../images/shop/shop_11.png" alt="" />
						酒店住宿
					</li>
					<li>
						<img src="../images/shop/shop_13.png" alt="" />
						旅游出行
					</li>
					<li>
						<img src="../images/shop/shop_15.png" alt="" />
						数码电子
					</li>
					<li style="justify-content: center;">
						<a href="../confirm/shop-list.html">
							更多类别
							<img src="../images/shop/shop_18.png" alt="" class="more_right"/>
						</a>
						
					</li>
				</ul>
			</div>
			<div class="shop_title">
				热 / 门 / 店 / 铺
				<div class="fr" @click="go_more()">more <img src="../images/shop/shop_27.png" alt="" height="10px"/></div>
			</div>
			<div class="shop_list">
				<ul>
					<li v-for="(v,i) in shops" v-if="i<15">
						<img :src="imgUrlS+v.logo" alt=""  style="width: 228px;height: 230px;"/>
						<div class="shop_bottom">
							<div class="logo_img"><img src="../images/shop/shop_07.png" alt="" /></div>
							<p class="shop_name">{{v.shopName}}</p>
							<p class="shop_score" style="position:relative;">
								<img src="../images/shop/shop_45.png" alt=""/>店铺评分
							</p>
							<p>
								<button type="" class="get_into" @click="go_shoplist(v.shopId)">进入店铺</button>
							</p>
						</div>
					</li>
					
					<!--<li>
						<img src="../images/shop/shop_32.png" alt="" width="230px"/>
						<div class="shop_bottom">
							<div class="logo_img"><img src="../images/shop/shop_07.png" alt="" /></div>
							<p class="shop_name">石家庄君泰商贸有限公司</p>
							<p class="shop_score" style="position:relative;">
								<img src="../images/shop/shop_45.png" alt=""/>店铺评分
							</p>
							<p>
								<button type="" class="get_into">进入店铺</button>
							</p>
						</div>
					</li>
					<li>
						<img src="../images/shop/shop_34.png" alt="" width="230px"/>
						<div class="shop_bottom">
							<div class="logo_img"><img src="../images/shop/shop_07.png" alt="" /></div>
							<p class="shop_name">石家庄君泰商贸有限公司</p>
							<p class="shop_score" style="position:relative;">
								<img src="../images/shop/shop_45.png" alt=""/>店铺评分
							</p>
							<p>
								<button type="" class="get_into">进入店铺</button>
							</p>
						</div>
					</li>
					<li>
						<img src="../images/shop/shop_36.png" alt="" width="230px"/>
						<div class="shop_bottom">
							<div class="logo_img"><img src="../images/shop/shop_07.png" alt="" /></div>
							<p class="shop_name">石家庄君泰商贸有限公司</p>
							<p class="shop_score" style="position:relative;">
								<img src="../images/shop/shop_45.png" alt=""/>店铺评分
							</p>
							<p>
								<button type="" class="get_into">进入店铺</button>
							</p>
						</div>
					</li>
					<li>
						<img src="../images/shop/shop_38.png" alt="" width="230px"/>
						<div class="shop_bottom">
							<div class="logo_img"><img src="../images/shop/shop_07.png" alt="" /></div>
							<p class="shop_name">石家庄君泰商贸有限公司</p>
							<p class="shop_score" style="position:relative;">
								<img src="../images/shop/shop_45.png" alt=""/>店铺评分
							</p>
							<p>
								<button type="" class="get_into">进入店铺</button>
							</p>
						</div>
					</li>
					<li>
						<img src="../images/shop/shop_30.png" alt="" width="230px"/>
						<div class="shop_bottom">
							<div class="logo_img"><img src="../images/shop/shop_07.png" alt="" /></div>
							<p class="shop_name">石家庄君泰商贸有限公司</p>
							<p class="shop_score" style="position:relative;">
								<img src="../images/shop/shop_45.png" alt=""/>店铺评分
							</p>
							<p>
								<button type="" class="get_into">进入店铺</button>
							</p>
						</div>
					</li>
					<li>
						<img src="../images/shop/shop_32.png" alt="" width="230px"/>
						<div class="shop_bottom">
							<div class="logo_img"><img src="../images/shop/shop_07.png" alt="" /></div>
							<p class="shop_name">石家庄君泰商贸有限公司</p>
							<p class="shop_score" style="position:relative;">
								<img src="../images/shop/shop_45.png" alt=""/>店铺评分
							</p>
							<p>
								<button type="" class="get_into">进入店铺</button>
							</p>
						</div>
					</li>
					<li>
						<img src="../images/shop/shop_34.png" alt="" width="230px"/>
						<div class="shop_bottom">
							<div class="logo_img"><img src="../images/shop/shop_07.png" alt="" /></div>
							<p class="shop_name">石家庄君泰商贸有限公司</p>
							<p class="shop_score" style="position:relative;">
								<img src="../images/shop/shop_45.png" alt=""/>店铺评分
							</p>
							<p>
								<button type="" class="get_into">进入店铺</button>
							</p>
						</div>
					</li>
					<li>
						<img src="../images/shop/shop_36.png" alt="" width="230px"/>
						<div class="shop_bottom">
							<div class="logo_img"><img src="../images/shop/shop_07.png" alt="" /></div>
							<p class="shop_name">石家庄君泰商贸有限公司</p>
							<p class="shop_score" style="position:relative;">
								<img src="../images/shop/shop_45.png" alt=""/>店铺评分
							</p>
							<p>
								<button type="" class="get_into">进入店铺</button>
							</p>
						</div>
					</li>
					<li>
						<img src="../images/shop/shop_38.png" alt="" width="230px"/>
						<div class="shop_bottom">
							<div class="logo_img"><img src="../images/shop/shop_07.png" alt="" /></div>
							<p class="shop_name">石家庄君泰商贸有限公司</p>
							<p class="shop_score" style="position:relative;">
								<img src="../images/shop/shop_45.png" alt=""/>店铺评分
							</p>
							<p>
								<button type="" class="get_into">进入店铺</button>
							</p>
						</div>
					</li>
					<li>
						<img src="../images/shop/shop_30.png" alt="" width="230px"/>
						<div class="shop_bottom">
							<div class="logo_img"><img src="../images/shop/shop_07.png" alt="" /></div>
							<p class="shop_name">石家庄君泰商贸有限公司</p>
							<p class="shop_score" style="position:relative;">
								<img src="../images/shop/shop_45.png" alt=""/>店铺评分
							</p>
							<p>
								<button type="" class="get_into">进入店铺</button>
							</p>
						</div>
					</li>
					<li>
						<img src="../images/shop/shop_32.png" alt="" width="230px"/>
						<div class="shop_bottom">
							<div class="logo_img"><img src="../images/shop/shop_07.png" alt="" /></div>
							<p class="shop_name">石家庄君泰商贸有限公司</p>
							<p class="shop_score" style="position:relative;">
								<img src="../images/shop/shop_45.png" alt=""/>店铺评分
							</p>
							<p>
								<button type="" class="get_into">进入店铺</button>
							</p>
						</div>
					</li>
					<li>
						<img src="../images/shop/shop_34.png" alt="" width="230px"/>
						<div class="shop_bottom">
							<div class="logo_img"><img src="../images/shop/shop_07.png" alt="" /></div>
							<p class="shop_name">石家庄君泰商贸有限公司</p>
							<p class="shop_score" style="position:relative;">
								<img src="../images/shop/shop_45.png" alt=""/>店铺评分
							</p>
							<p>
								<button type="" class="get_into">进入店铺</button>
							</p>
						</div>
					</li>
					<li>
						<img src="../images/shop/shop_36.png" alt="" width="230px"/>
						<div class="shop_bottom">
							<div class="logo_img"><img src="../images/shop/shop_07.png" alt="" /></div>
							<p class="shop_name">石家庄君泰商贸有限公司</p>
							<p class="shop_score" style="position:relative;">
								<img src="../images/shop/shop_45.png" alt=""/>店铺评分
							</p>
							<p>
								<button type="" class="get_into">进入店铺</button>
							</p>
						</div>
					</li>
					<li>
						<img src="../images/shop/shop_38.png" alt="" width="230px"/>
						<div class="shop_bottom">
							<div class="logo_img"><img src="../images/shop/shop_07.png" alt="" /></div>
							<p class="shop_name">石家庄君泰商贸有限公司</p>
							<p class="shop_score" style="position:relative;">
								<img src="../images/shop/shop_45.png" alt=""/>店铺评分
							</p>
							<p>
								<button type="" class="get_into">进入店铺</button>
							</p>
						</div>
					</li>-->
				</ul>
			</div>
			
			<div style="text-align: right;">
				<div id="pager"></div>
			</div>
		</div>
		<div id="ck1"></div>
		<div id="ck3"></div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../plugin/layer/layer.js"></script>
		<script type="text/javascript" src="../js/carousel.js"></script>
		<script type="text/javascript" src="../js/ljf_base.js"></script>
		<script src="../js/lxs_jk.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$('.get_into').click(function(){
				location.href="../confirm/store.html";
			});
			$('.shop_title .fr').click(function(){
				location.href="../confirm/shop-list.html";
			});
			$(function() {
				$(".carousel-content").carousel({
					carousel: ".carousel", //轮播图容器
					timing: 5000, //自动播放间隔
					animateTime: 800, //动画时间
					auto: true, //是否自动播放
				});
			});
		</script>
		<script type="text/javascript">
			$(function(){
				laypage({
				cont: 'pager',
				pages: 10, //总页数
				skip: false, //是否开启跳页
				skin: '#ed5d2a',
				groups: 5, //连续显示分页数
				curr: function() { //通过url获取当前页，也可以同上（pages）方式获取
					var page = location.search.match(/page=(\d+)/);
					return page ? page[1] : 2;
				}(),
				/*jump: function(e, first) { //触发分页后的回调
					if(!first) { //一定要加此判断，否则初始时会无限刷新
						var nuewurl = ZZHT.splitURL("page");
						var ulist = nuewurl.split("?");
						if(ulist.length > 1) {
							location.href = nuewurl + '&page=' + e.curr;
						} else {
							location.href = '?page=' + e.curr;
						}

					}
				}*/
			});

			var total = 2;

			function page(t) {
				var page = location.search.match(/page=(\d+)/);
				var curr = 1;
				if(page && page.length > 1) { //说明当前url上有page参数
					curr = page[1]; // 当前页
				}
//				var nuewurl = ZZHT.splitURL("page"); // 当前url
//				var ulist = nuewurl.split("?"); // 将传递的参数与url分开
//				// 说明当前有参数. 需要带着参数一起传递
//				var url = (ulist.length > 1) ? nuewurl + '&page=' : '?page=';

				if(t == 'prev') { // 上一页
					if(curr <= 1) return;
					curr = parseInt(curr) - 1;
					location.href = url + curr;
				} else { // 下一页
					if(curr >= total) return;
					curr = parseInt(curr) + 1;
					location.href = url + curr;
				}

			}
			})
			
		</script>
		<script type="text/javascript">
			var vm = new Vue({//new 一个实例
				el: '.ZZHT-container',//作用域 
				data: {//数据源
					imgUrlS:imgUrlS,//图片基础路径 在ljf_base.js 里 所有页面应该都有配置
					shops:[],//
					shoplist:[],//店铺
					adimg:[],//轮播图数组
					adurl:[],//轮播图链接数组
				},
				methods:{
					go_shoplist:function(id){//点击跳转到店铺页
						location.href="../confirm/store.html?shopId="+id;
					},
					go_more:function(id){//点击跳转到店铺页
						location.href="../confirm/shop-list.html";
					}
				}
			})
			$.ajax({
				type: "get",
				url: SURLS + "/sktShops/findShopsAll",
				success: function(data) {
					console.log(data);
					
					
					for(var i=0;i<data.entity.length;i++){
						vm.shops.push(data.entity[i])
					}
				}
			});
			$.ajax({
				type: "get",
				url: SURLS + "/sktShops/selectShopsGoodsId",
				success: function(data) {
					console.log(data);
				}
			});
			$.ajax({//首页轮播
				type: "get",
				url: SURLS + "/sktShops/findWebLunbo",//SURLS基础路径 在ljf_base.js 里 所有页面应该都有配置
				success: function(res) {
					console.log(res);
					//今日推荐在首页只取前四个
					
					for(var i=0;i<res.entity.length;i++){
						vm.adimg.push(res.entity[i])
					}
					for(var i=0;i<res.entity.length;i++){
						vm.adurl.push(res.entity[i])
					}
					
					Vue.nextTick(function(){
						$(".carousel-content").carousel({
							carousel: ".carousel", //轮播图容器
							//					indexContainer : ".img-index",//下标容器
							prev: ".carousel-prev", //左按钮
							next: ".carousel-next", //右按钮
							timing: 5000, //自动播放间隔
							animateTime: 800, //动画时间
							auto: true, //是否自动播放
						});
					})
				}
			});
		</script>
	</body>

</html>